<template>
  <demo :code-str="codeStr" :code-desc="codeDesc">
    <template #componentName>Toast</template>
    <template #componentDesc>使用方法同vant-ui中的van-toast</template>
    <template #component>
      <h-row>
        <h-button @click="$toast.success('成功')">成功</h-button>
        <h-button @click="$toast.fail('失败')">失败</h-button>
        <h-button @click="$toast.loading('加载中')">加载</h-button>
        <h-button @click="$toast.loading('加载中')">加载</h-button>
        <h-button @click="$toast({ type: 'success', position: 'top' })"
          >上方</h-button
        >
        <h-button @click="$toast({ type: 'success', position: 'bottom' })"
          >下方</h-button
        >
      </h-row>
    </template>
  </demo>
</template>

<script>
export default {
  name: 'MobileV2ToastDemo',
  data() {
    return {
      codeDesc: '使用<span>toast.type</span>可展示不同类型提示',
      codeStr: `
<h-row>
  <h-button @click="$toast.success('成功')">成功</h-button>
  <h-button @click="$toast.fail('失败')">失败</h-button>
  <h-button @click="$toast.loading('加载中')">加载</h-button>
  <h-button @click="$toast.loading('加载中')">加载</h-button>
  <h-button @click="$toast({type: 'success', position: 'top'})">上方</h-button>
  <h-button @click="$toast({type: 'success', position: 'bottom'})">下方</h-button>
</h-row>
        `,
    };
  },
};
</script>

<style>
</style>